<template>
  <transition name="slide">
    <div class="rest-password">
      <div class="rest-box">
        <h1 class="title"></h1>
        <div class="edit-password" v-show="editPassword">
          <div class="info">
            Enter your email address and we'll email
            you a link to reset your password or <span class="go-sign-up" @click="singUpFn">Sign up</span>
          </div>
          <p class="tie"  v-html="errorInfo"></p>
          <input type="text" placeholder="Email" class="email" :class="{'fixed-input':this.isWriting}" data-bhc="email:email" name="email" autocorrect="off" autocomplete="off"
                 v-model="upemail" @focus="clearErrorInfo" @keyup.enter="checkEmailFn">
          <button class="btn" @click="checkEmailFn">Rest Password</button>
        </div>
        <div class="check-email" v-show="checkEmail">
            <h3 class="title1">Reset your password</h3>
            <p class="email-tie">Reset link has been send to your email</p>
            <p class="your-email">{{upemail}}</p>
            <p>please go to check it</p>
            <button class="btn" @click="SignIn" >Sign In</button>
        </div>
        <div class="loading-box" v-show="loading">
          <p class="loading-text">Validating  your Email…</p>
          <img class="img" src="../../../static/img/loading.gif">
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import Loading from 'base/loading/loading'
  import {mapMutations} from 'vuex'
  import {CheckEmail} from 'api/rest-password'
    export default {
        data(){
          return{
            editPassword : true,
            checkEmail : false,
            loading : false,
            errorInfo : '',
            upemail: '',
            isWriting:false,
            screenHeight: document.documentElement.clientHeight,        //此处也可能是其他获取方法
            originHeight: document.documentElement.clientHeight,
          }
        },
        mounted() {
          let self = this;
          window.onresize = function() {
            return (function(){
              self.screenHeight = document.documentElement.clientHeight;
            })()
          }
        },
        methods:{
          loadFn(){
            this.editPassword = false ;
            this.checkEmail = false ;
            this.loading = true ;
          },
          checkEmailFn(){
            let str =this.upemail.trim();
            if(str === ''){
              this.errorInfo ='Please enter your email address.'
              return false
            }
            if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(str)){
              this.errorInfo ='Please enter a correct email address.'
              return false
            }
            this.errorInfo = '';
            this.setRouteLoading(true)
            CheckEmail(str).then(() => {
              this.setRouteLoading(false)
              this.editPassword = false ;
              this.checkEmail = true ;
            });
          },
          clearErrorInfo(){
            this.errorInfo=''
          },
          SignIn(){
            this.$router.push({
              path: `/sign-in`
            });
          },
          singUpFn(){
            this.$router.push({
              name: 'SingIn',
              params: {
                signup: 1
              }
            })
          },
          ...mapMutations({
            setSignUpVal : 'SET_SIGNUP_VAL',
            setRouteLoading : 'SET_ROUTE_LOADING'
          })
        },
      components:{
        Loading
      },
      watch:{
        screenHeight (val) {
          if(this.originHeight > val + 100) {        //加100为了兼容华为的返回键
            this.isWriting = true;
          }else{
            this.isWriting = false;
          }
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
  .rest-password
    background: $color-white
    color #333
    width:520px
    height:440px
    margin: 0 auto ;
  .btn
    width:100%;
    height:3.5rem
    line-height 3.5rem
    background #18823a
    font-size:18px
    text-align center
    color:#fff
    border:none
    margin-top: 3rem
    border-radius:2px
    cursor:pointer
  .rest-box
    padding: 0 8%
    .title
      color: #18823a;
      font-size:40px
      margin: 5.5rem auto 4rem;
      text-align center
      background url('logo.png') no-repeat center center
      height: 2.5rem;
      background-size auto 100%
    .edit-password
      .info
        font-size:16px;
        line-height:20px
        margin-bottom:2rem
        .go-sign-up
          color:#2f4bf7
          cursor:pointer
      .tie
        color:#fa4c4d
        font-size:14px;
        margin-bottom: 6px;
        height:14px;
      .email
        padding-left: 3%
        height:3.5rem
        line-height: 3.5rem
        border:1px solid #ddd
        width:96.8%
      .fixed-input
        width:81%
        position:fixed
        bottom: 10%
        left:8%
    .check-email
      text-align center
      font-size 16px
      line-height: 1.88rem;
      margin-top:4rem
      .title1
        font-size:20px
        margin-bottom:1rem;
      .btn
        margin-top:4rem
    .loading-box
      text-align center
      .loading-text
        font-size:20px
        margin-top: 30%
      .img
        margin-top: 30%
        width:2rem
        height:2rem





</style>
